<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /*1.标签名选择器:选中指定的一类标签 */
        h4 {
            color: red;
        }
        /*2.类选择器:选中指定class值的元素*/
        .red {
            background-color: red;
            color: white;
        }
        .green {
            background-color: green;
            color: white;
        }
        .fs {
            font-size: 50px;
        }
        /*3.伪类选择器，选中元素的某个时刻/状态*/
        /*超链接未被访问时的状态*/
        a:link {
            color: gray;
        }
        /*超链接访问过后的状态*/
        a:visited {
            color: green;
        }
        /*悬停状态--不是超链接独有*/
        a:hover {
            color: orange;
        }
        /*超链接激活状态*/
        a:active {
            color: red;
        }
        /*4.id选择器:选中唯一一个元素*/
        #d1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        /*选中id值为d1元素，悬停时的状态*/
        /*必须同时满足所有条件，才能被选中*/
        #d1:hover {
            background-color: green;
        }
        /*5.通用选择器:选中页面的所有元素*/
        * {
            /*文本样式，设置为斜体字*/
            font-style: italic;
        }
        /*6.分组选择器，同时选中多种不同的元素*/
        /*只要是下面任意一种，就可以应用CSS样式*/
        #d1,h4,.red {
            /*文本修饰:添加下划线*/
            text-decoration: underline;
        }
        /*7.属性选择器 选中具有指定属性名与属性值的元素*/
        input[type="text"]{
            background-color: yellow;
        }
        /*后代选择器 选中#d2里所有的span元素 */
        #d2 span{
            background-color: pink;
        }
        /*直接子代选择器 选中儿子元素,不会继续向下选  可以向下写多层*/
        #d2>div>span {
            color: magenta;
        }
    </style>
</head>
<body>
    <h4>我是标题</h4>
    <p>我是段落</p>
    <a href="#">我是超链接</a>
    <h4>我是标题</h4>
    <hr>
    <span class="red">用户名已被占用！</span>
    <span class="red">两次密码不一致！</span>
    <h5 class="red">哈哈哈哈</h5>
    <span class="green">邮箱可以使用！</span>
    <span class="green fs">手机号格式正确！</span>
    <hr>
    <a href="https://www.baidu.com">百度首页</a>
    <a href="abc">错误地址</a>
    <div id="d1">我是div</div>
    <div>我是div</div>
    <div>我是div</div>
    <hr>
    <input type="text" name="email"> <br>
    <input type="text" name="uname"> <br>
    <input type="password"> <br>
    <hr>
    <div id="d2">
        <span>1</span>
        <div>
            <span>2</span>
            <b>测试文字</b>
        </div>
        <span>3</span>
    </div>
</body>
</html>